<template>
	<div >
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" type="button" @click="show">点击输出上方DOM元素</button>
		<School id="sch"></School>
		<School ref="sch"/>
	</div>
	
</template>

<script>
	// 引入School组件
	import School from './components/School.vue'
	export default{
		name:'App',
		components:{
			School
		},
		data(){
			return{
				msg:'欢迎学习Vue'
			};
		},
		methods:{
			show(){
				// console.info(document.getElementById('title'));
				console.log(this);
				// 此处是 ref="title" 的输出 真实DOM元素
				console.log(this.$refs.title);
				// 此处是 ref="btn" 按钮的输出
				console.log(this.$refs.btn);
				// 通过原生DOM获取id 来输出
				console.log(document.getElementById('sch'));
				// 此处是 ref="sch" 按钮的输出 School组件实例对象
				console.log(this.$refs.sch);
			}
		}
	}
</script>

<style>
</style>
